<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <script type="module" src="https://cdn.jsdelivr.net/npm/webzen-ui@0.0.4/src/component/wz-icon/index.js"></script> -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/webzen-ui@0.0.10/src/component/wz-button/index.js">
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

     
    </style>

    <style>
        @font-face {
            font-family: 'PingFang';
            src: url('https://cdn.jsdelivr.net/npm/frontfontpackage@1.0.0/PingFang/苹方黑体-细-简.ttf');
            font-weight: normal;
            font-style: normal;
            font-display: optional
        }

        body {
            /* padding: 30px; */
            background: #1C1D1E;
        }


        /* 父盒子 */
        .card {
            width: 200px;
            height: 300px;
            background: #1F2426;
            padding: 40px 10px;
            /* padding-top: 3%; */
            overflow: hidden;
            
            border-radius: 20px;
            border: none;
        }

      


        .tab {
            display: flex;
            /* 横着排列 */
            flex-direction: row;
            overflow-y: scroll;
            white-space: nowrap;
            
            cursor: pointer;
        }

        .tab::-webkit-scrollbar {
            display: none;
        }

        .tab_item {
            font-size: 15px;
            font-family: PingFang, sans-serif;
            line-height: 1rem;
            color: #979797;
        }

        .text_active {
            color: #ffffff;
        }

        .text_active::after {
            color: #333333;
            content: "";
            display: block;
            width: 70%;
            height: 0px;
            margin: 0 auto;
            margin-top: 10px;
            border: 1px solid gray;
        }

        .tab>:not(:first-child) {
            margin-left: 15px;
        }
        .tab {
            margin: -20px 0px 5px 10px;
        }
    </style>


    <style>
        .tab_container::-webkit-scrollbar{
            width: 5px;
            /* 对应横向滚动条的宽度 */
            height: 10px;
            background-color: #2a2a2a;
        }
        .tab_container::-webkit-scrollbar-thumb {
            background-color: #464a4c;
            border-radius: 32px;
        }
        .tab_container {
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            width: 100%;
            position: relative;
        }
    </style>


<style>
    .tab_container_wall{
        display: flex;
        flex: 1;
        display: grid;
        grid-row: 1fr 1fr;
        padding-top: 20px;
        width: 100%;
        opacity: 0.5;
    }
    .tab_container_wall.active{
        padding-top: 20px;
        width: 100%;
        opacity: 1;
    }
    .tab_container_wall_image{
        width: 80%;
        height: 100px;
        object-fit: cover;
        margin: 0 auto;
        display: block;
        border-radius: 10px;
    }

    .tab_container_wall_text{
        /* width: 80%; */
       text-align: center;
       margin-top: 10px;
       color: white;
    }
</style>



<style>
   
</style>

<style>
    .container{
        display: flex;
    }
</style>




<style>
    input{
        width: 180px;
        margin: 0 auto;
        border-radius: 8px;
        height: 30px;
        background: #1C1D1E;
        border-color: transparent;
        color: white;
        border: none;
       
        position: absolute;
        text-indent: 28px; /* 将文本向右缩进 50px */
        font-size: 12px;
    }
    input[type="text"]:focus {
        border-color: transparent;
        outline: none;
        border: rgba(255,255,255,0.4) solid 1px;
    }
    .search{
        color: white;
        width: 14px;
        height: 14px;
        position: relative;
        top: 6px;
        left: 10px;
    
    }
    .search_area{
       
        position: relative;
        top: 2px;
        left: 6px;
        margin: 5px;
    }
</style>
<style>
    /*表格样式*/
    table {
        width: 100%;

        margin: 0px ;
        /* border-collapse: collapse; */
        background: transparent;
        color: white;
        border-collapse: separate;
        /* 每个单元格的长宽，第一个越大间隔越小，第二个越大间隔越大 */
        border-spacing: 10px 15px;
        font-weight: 100;
        font-family: sans-serif;
    }

    th,
    td {
        height: 25px;
        line-height: 25px;
        text-align: center;
        /* border: 1px solid #ccc; */
    }


</style>
</head>

<body>
    
        <div class="container">
            <div class="card">
                <div class="tab">
                    <span class="tab_item text_active" index=0>通用</span>
                    <span class="tab_item" index=1>代码</span>
                    <span class="tab_item" index=2>声音</span>
    
                </div>
    
                <div class="tab_container" index=0>
                 
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src="./1.png"/>
                        <div class="tab_container_wall_text" >
                            手势控制鼠标
                        </div>
                    </div>
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src="./2.png"/>
                        <div class="tab_container_wall_text" >
                            开启摄像头
                        </div>
                    </div>
                   
                
                </div>
                <div class="tab_container" index=1>
                    <div class="search_area">
                        <input type="text">
                        <img class="search" src="./search.svg" alt="" >
                    </div>
                   
                    <div class="tab_container_wall active">
                        
                        <!-- <img class="tab_container_wall_image" src="./3.png"/>
                        <div class="tab_container_wall_text" >
                            代码片段 <wz-button size="small">你好</wz-button>
                        </div> -->
                        <table>
                          
                            <thead>
                    
                                <th>代码名</th>
                                <th>操作</th>
                            </thead>
                            <tbody>
                             
                              
                            </tbody>
                        </table> 
                        
                    </div>
                    
                </div>
                <div class="tab_container" index=2>
                    2
                </div>
            </div>
            
        </div>
       

    

    <script type="module">
        import dialog from 'https://cdn.jsdelivr.net/npm/webzen-ui/src/component/wz-dialog/index.js';
        let mainTab = document.querySelector(".tab")
        let mainContainer = document.querySelectorAll(".tab_container")

        // 初始话术
        Array.from(mainContainer).forEach((e) => {
            e.style.display = "none"
        })

        mainContainer[1].style.display = "block"

        mainTab.addEventListener("click", (e) => {
            let index
            if (JSON.stringify(e.target.classList).match(/tab_item/)) {
                Array.from(mainTab.children).forEach((e) => {
                    e.classList.remove("text_active")
                })
                // 变化路由
                Array.from(mainContainer).forEach((e) => {
                    e.style.display = "none"
                })

                mainContainer[e.target.getAttribute("index")].style.display = "block"
                e.target.classList.add("text_active")
            }

        })



        // tab2:代码操作
        document.querySelectorAll('[index="1"] .tab_container_wall').forEach((e)=>{
            e.addEventListener("click",(event)=>{
                console.log(e.querySelector(".tab_container_wall_text"))
                // alert(JSON.stringify(e.querySelector(".tab_container_wall_text")?.innerText,null,2))
            })
        })

        function copyToClipboard(copyValue) {
            //创建一个新组件
            let oInput = document.createElement("textarea");
            //给新组件赋值
            oInput.value = copyValue;
            //添加新节点到页面body中
            document.body.appendChild(oInput);
            //选择对象
            oInput.select();
            //对选择对象的值进行复制到浏览器中
            document.execCommand("Copy");
            //删除新节点(重置操作)
            document.body.removeChild(oInput);
        }
        import {codeSnippet} from "./code.js"
        let baseCodeSnippet = document.querySelector("tbody")
        console.log(codeSnippet,"codeSnippet")
        for(let i in codeSnippet){
            const tempParent = document.createElement("tr")
            tempParent.innerHTML = `
                    <td>${codeSnippet[i].name}</td>
                    <td><wz-button type="primary">复制</wz-button></td>
                    <code style="display:none" id="code">${codeSnippet[i].content}</code>
            `
           
            baseCodeSnippet.appendChild(tempParent)
        }
        let userFn = (row)=>{
            console.log(row.phone)
        }
        Array.from( document.querySelectorAll("wz-button")).forEach((e)=>{
       
            e.addEventListener("click",(mouseTarget)=>{
                let temp = []
                let res = {}
                console.log((mouseTarget.target.parentNode.parentNode.querySelector("#code").innerHTML))
                // console.log(res)  
                let last = mouseTarget.target.parentNode.parentNode.querySelector("#code").innerHTML
                console.log(last)
                copyToClipboard(last)
                alert("复制成功")
            })
        })

        document.querySelector("input[type=text]").addEventListener("change",(e)=>{
            console.log(e.target.value)
        })
        document.querySelector("input[type=text]").addEventListener("input",(e)=>{
            // 空值 获取全部
            if(!e.target.value){
                for(let i in codeSnippet){
                const tempParent = document.createElement("tr")
                tempParent.innerHTML = `
                        <td>${codeSnippet[i].name}</td>
                        <td><wz-button type="primary">复制</wz-button></td>
                        <code style="display:none" id="code">${codeSnippet[i].content}</code>
                `
            
                baseCodeSnippet.appendChild(tempParent)
            }
            }else{
                baseCodeSnippet.innerHTML=""
                
                for(let i in codeSnippet){
                const tempParent = document.createElement("tr")
                if(codeSnippet[i].name.includes(e.target.value)){
                    tempParent.innerHTML = `
                            <td>${codeSnippet[i].name}</td>
                            <td><wz-button type="primary">复制</wz-button></td>
                            <code style="display:none" id="code">${codeSnippet[i].content}</code>
                    `
                
                    baseCodeSnippet.appendChild(tempParent)
                }
                   
                }
            }
            console.log(e.target.value)
           
        })


    </script>
</body>

</html>